css3的边框 |
您所在的位置：网站首页 › border radius属性10px 10px 10px › css3的边框 |
css3的边框
|
一、border-radius（定义圆角）
复合写法： border-radius: 10px; 当一个参数的时候，是4个角都是一样的 border-radius: 10px 10px; 当两个参数的时候，第一个参数代表左上角和右下角，第二个参数代表左下角和右上角 border-radius: 10px 10px 10px; 当三个参数的时候，第一个参数代表左上角，第二个参数代表右上角和左下角，的三个参数代表右下角 border-radius: 10px 10px 10px 10px; 当四个参数的时候，分别是左上角、右上角、右下角、左下角 Document * { margin: 0; padding: 0; box-sizing: border-box; } .yi{ border: 1px solid red; width: 200px; height: 200px; border-radius: 100px; } .er{ border: 1px solid red; width: 200px; height: 200px; border-radius: 10px; } 圆 圆角正方形
语法： 参数分别为 X轴偏移量（必需，可为负数，正左负右） Y轴偏移量（必需，可谓负数，正下负上） 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式（默认是外部阴影，添加上inset就是内部阴影）; box-shadow: 10px 10px 10px 10px red inset; 阴影模糊半径：其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小； .yi{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50px; border: 1px solid yellow; width: 100px; height: 100px; /* 可以设置多个阴影，依次从上到下排序 */ box-shadow: 0 0 10px 0px yellow, 0 0 20px 15px rgb(255, 75, 75), 0 0 35px 20px rgb(255, 116, 116), 0 0 55px 35px rgb(255, 188, 188); }
border-image-source：定义元素边框背景图像，可以是图片路径或使用渐变创建的“背景图像”。 border-image-slice：定义元素边框背景图像从什么位置开始分割。 border-image-width：定义元素边框背景图像厚度。 border-image-outset：定义元素边框背景图像的外延尺寸。 border-image-repeat：定义元素边框背景图像的平铺方式。 border-image-repeat的三个属性： repeat就是一直重复，然后超出部分剪裁掉，而且是居中开始重复。 Round 可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸）。 Stretch 很好理解就是拉伸。 .yi{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; background: #F4FFFA; border:50px solid; border-image-source: url("da.jpg"); border-image-slice:50; border-image-outset:0; border-image-repeat: repeat; }
|
分拆独立属性语法： 每个角的弧度是可以设置两个半径分别是水平半径和垂直半径 border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; border-bottom-left-radius: 10px 10px; border-bottom-right-radius: 10px 10px; 
【本文地址】
今日新闻 |
推荐新闻 |